<template>
    <div>
        <h2>provide 和 inject/watch 和 watchEffect</h2>
    </div>
</template>
<script name="setup" lang="ts" setup>
import {ref,provide, inject, watch, watchEffect } from 'vue';

// 定义一个唯一的InjectionKey
const messageKey = Symbol();
const count =ref(0)
// 祖先组件
provide(messageKey, 'Hello');

// 后代组件
const message = inject(messageKey, 'Default Message'); // 第二个参数为默认值

// ---------------------------------
watch(count, (newValue: number, oldValue: number) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

watchEffect(() => {
  console.log(`count is now: ${count.value}`);
});
</script>
<style scoped lang="less"></style>



